<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/login/login.css" rel="stylesheet"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">登录</h1>
</header>
<div class="mui-content" id="app">
    <form id='login-form' class="mui-input-group">
        <div class="mui-input-row">
            <label>账号</label> <input v-model="account" id='account' type="text"
                                     class="mui-input-clear mui-input" placeholder="请输入账号">
        </div>
        <div class="mui-input-row">
            <label>密码</label> <input v-model="password" id='password' type="password"
                                     class="mui-input-clear mui-input" placeholder="请输入密码">
        </div>
    </form>
    <form class="mui-input-group">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">自动登录
                <div id="autoLogin" class="mui-switch">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
        </ul>
    </form>
    <div class="mui-content-padded">
        <button v-on:click="login" id='login' type="button"
                class="mui-btn mui-btn-block mui-btn-primary">登录
        </button>
        <div class="link-area">
            <a id='reg'>注册账号</a> <span class="spliter">|</span> <a
                    id='forgetPassword'>忘记密码</a>
        </div>
    </div>
    <div class="mui-content-padded oauth-area"></div>
</div>
<script src="/js/mui.min.js"></script>
<script src="/js/mui.enterfocus.js"></script>
<script src="/js/app.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>

//    var k = data.length;//你的数据长度
//    var j = 0; //加载的数据起始条数
//
//    //点击加载留言方法
//    function huoqu_pinglun() {
//        var i = j;//存储前一次加载的数据条数
//        if((j+7)>=k){
//            j = k; //限制加载的条数不能超过总数据条数
//            console.log("不能再加载啦，已经没有评论了!");
//        }else {
//            j = j+6;
//        }
//        //开始加载评论
//        for(i;i<j;i++){
//            //这里面写要加载的评论
//        }
//    }

var vm = new Vue({
	el: '#app',
	data: {
		account: "",
		password: "",
		site: "菜鸟教程",
	},
	methods: {
		login: function () {
			let data = new URLSearchParams();
			data.append('userName', this.account);
			data.append('passWord', this.password);
			axios
				.post('/login/login', data)
				.then(function (response) {
					if (response.data.code == 200) {
						window.location.href = "/main";
					}
					// console.log();
				})
				.catch(function (error) { // 请求失败处理
					console.log(error);
				});
		},
		details: function () {
			return this.site + " - 学的不仅是技术，更是梦想！";
		}
	}
})
</script>
</body>

</html>
